import { Dayjs } from "dayjs";
import styles from "../../index.module.less";
import {
  handleStrikeLabel,
  getLocation,
  onLoadOccupationCatesData,
  nickname_validate,
  getStarSign,
  tmp_account_picture,
} from "../../utils";
import {
  clickPointType,
  dataRes,
  drawerFormState,
  refreshComponent,
  imgTipMap,
  defaultDrawerInputValidator,
} from "../../store";
import {
  accountTypeMap,
  countryCodeMap,
  dicts,
  drawerChannelMap,
  drinkMap,
  educationalMap,
  eyeColorMap,
  hairColorMap,
  intentionMap,
  merchantUsersMap,
  monthIncomeMap,
  occupationCatesData,
  popularOptions,
  punchMap,
  raceMap,
  scoreOptions,
  skinColorMap,
  smokeMap,
  tattooMap,
  userSexMap,
  userStateMap,
  userTypeMap,
  vipOptions,
} from "../../dict";
import IMToolTip from "@/components/common/ToolTip";
import { addKey } from "@/utils/http";
export const currencyUnit = ref("USDT");
export const fetchCurrencyUnit = async (value) => {
  const res: any = await userApi.queryCurrencyUnit({
    country_code: value,
  });
  if (res.code != 200) return message.error(res.message);
  currencyUnit.value = res.data.currency;
};
export default defineComponent({
  setup() {
    return () => (
      <>
        <a-row class="s-drawer-extra-row">
          <s-title>{$t("base.userInfo")}</s-title>
        </a-row>
        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span={12}>
            <a-form-item
              name="avatar"
              label={$t("table81")}
              rules={{
                required: !drawerFormState.avatar,
                trigger: ["blur"],
                message: $t("user6"),
              }}
            >
              <div style="display: flex; flex-wrap: wrap; gap: 2px;">
                {/* @ts-ignore */}
                <div class={styles.upload_image} value={imgTipMap[1]}>
                  <upload-image key="avatar" vModel={drawerFormState.avatar} />
                </div>

                {addKey(drawerFormState.account_picture).map(
                  ({ diff_key, diff_value }, index) => (
                    <upload-image
                      key={diff_key}
                      // vModel={drawerFormState.account_picture[index]}
                      modelValue={diff_value}
                      onUpdate:modelValue={(value) => {
                        drawerFormState.account_picture[index] = value;
                        tmp_account_picture.value[index] = {
                          sort: index + 2,
                          type: 1,
                          url: value,
                        };
                      }}
                    />
                  )
                )}
              </div>
            </a-form-item>
          </a-col>
          <a-col span={12}>
            <a-form-item label={$t("table82")} name="verify_video">
              <upload-video
                v-model:fileId={drawerFormState.verifyFileid}
                v-model={drawerFormState.verify_video}
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          {withDirectiveInput({
            vNode: (
              <>
                <a-col span="12">
                  <a-form-item
                    label={$t("table83")}
                    name="nickname"
                    rules={[
                      {
                        required: true,
                        trigger: ["change", "blur"],
                        validator: nickname_validate(),
                      },
                    ]}
                  >
                    <s-input
                      vModel={drawerFormState.nickname}
                      placeholder={$t("placeholder33")}
                      maxlength={12}
                    ></s-input>
                  </a-form-item>
                </a-col>
              </>
            ),
          })}

          <a-col span="12">
            <a-form-item
              label={$t("table84")}
              name="sex"
              rules={[
                {
                  required: true,
                  message: $t("placeholder73"),
                  trigger: ["change", "blur"],
                },
              ]}
            >
              <s-radio-group
                vModel={drawerFormState.sex}
                options={userSexMap}
                onChange={({ target: { value } }: any) => {
                  drawerFormState.cup = undefined;
                  if (value === 1) {
                    if (isString(drawerFormState.occupation_id)) {
                      const tmpArray = drawerFormState.occupation_id.split("/");
                      drawerFormState.occupation_id =
                        +tmpArray[0] != 0 && +tmpArray[1] != 0
                          ? drawerFormState.occupation_id
                          : undefined;
                      drawerFormState.month_income =
                        +drawerFormState.month_income > 0
                          ? drawerFormState.month_income
                          : undefined;
                    }
                  }
                }}
              ></s-radio-group>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          {withDirectiveInput({
            bindingValue: "",
            vNode: (
              <>
                <a-col span="12">
                  <a-form-item
                    label={$t("table85")}
                    name="social_account"
                    /*rules={[
                      {
                        required: true,
                        trigger: ["change", "blur"],
                        validator: (rule: any, value: any) => {
                          if (value?.length <= 3) {
                            defaultDrawerInputValidator[1][3] = true;
                            return Promise.reject(
                              $t("placeholder74") + 4 + $t("base.digit")
                            );
                          }
                          defaultDrawerInputValidator[1][3] = false;
                          return Promise.resolve();
                        },
                      },
                    ]}*/
                  >
                    <s-input
                      vModel={drawerFormState.social_account}
                      placeholder={$t("placeholder34")}
                      onInput={() => {
                        switch (drawerFormState.social_account_type) {
                          case "telegram":
                            drawerFormState.social_account =
                              drawerFormState.social_account.slice(0, 32);
                            break;
                          case "instagram":
                          case "whatsapp":
                            drawerFormState.social_account =
                              drawerFormState.social_account.slice(0, 30);
                            break;
                          case "facebook":
                          case "line":
                            drawerFormState.social_account =
                              drawerFormState.social_account.slice(0, 20);
                            break;
                          case "twitter":
                            drawerFormState.social_account =
                              drawerFormState.social_account.slice(0, 15);
                            break;
                        }
                      }}
                      vSlots={{
                        addonBefore: () => (
                          <s-select
                            allowClear
                            onChange={function (value, option) {
                              drawerFormState.social_account = undefined;
                            }}
                            vModel:newValue={
                              drawerFormState.social_account_type
                            }
                            style="width: 100px"
                            placeholder={$t("placeholder35")}
                            options={accountTypeMap}
                          />
                        ),
                      }}
                    ></s-input>
                  </a-form-item>
                </a-col>
              </>
            ),
          })}
          <a-col span="12">
            <a-form-item label={$t("table2")} name="mobile_number">
              {drawerFormState.mobile_area ? (
                <i>
                  +{" "}
                  {drawerFormState.mobile_area
                    ? drawerFormState.mobile_area + " "
                    : ""}
                  {drawerFormState.mobile_number ?? ""}
                </i>
              ) : null}
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span={12}>
            <a-form-item
              label={$t("table86")}
              name="birthday"
              format="YYYY-MM-DD"
              rules={[
                {
                  required: true,
                  message: $t("placeholder75"),
                  trigger: ["change", "blur"],
                },
              ]}
            >
              <s-date-picker
                allowClear={false}
                disabledDate={(current: Dayjs) =>
                  current &&
                  current >
                    $dayjs(
                      new Date(
                        getLastYear(18).getTime() - 1 * 24 * 60 * 60 * 1000
                      )
                    ).endOf("day")
                }
                onChange={function (date: Dayjs, dateString: string) {
                  const start_sign = getStarSign(date);
                  drawerFormState.constellation = start_sign;
                }}
                v-model={drawerFormState.birthday}
                format="YYYY-MM-DD"
              />
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item
              label={$t("table12")}
              name="country_code"
              rules={[
                {
                  required: true,
                  message: $t("placeholder36"),
                  trigger: ["change", "blur"],
                },
              ]}
            >
              <s-select
                vModel:newValue={drawerFormState.country_code}
                placeholder={$t("placeholder36")}
                options={countryCodeMap.value}
                showSearch={true}
                filterOption={filterOption}
                onChange={(value) => fetchCurrencyUnit(value)}
                onkeyup={({ target }) => only_limit_charts(target)}
              ></s-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span="12">
            <a-form-item label={$t("table14")} name="merchant_uid">
              <s-select
                allowClear
                vModel:newValue={drawerFormState.merchant_uid}
                placeholder={$t("placeholder24")}
                options={arrayToOptions(merchantUsersMap.value, {
                  label: "name",
                  value: "id",
                })}
                disabled={!!drawerFormState.merchant_uid}
                showSearch={true}
                filterOption={filterOption}
                onChange={(value: any) => {
                  if (!isEmptyType(value))
                    drawerChannelMap.value = dicts.value.channel.filter(
                      ({ merchant_uid }: any) => merchant_uid === value
                    );
                  else drawerChannelMap.value = deepClone(dicts.value.channel);
                  drawerFormState.channel_id = undefined;
                  refreshComponent.value = false;
                  nextTick(() => (refreshComponent.value = true));
                }}
              />
            </a-form-item>
          </a-col>
          {!isEmptyType(drawerFormState.merchant_uid) &&
          refreshComponent.value ? (
            <>
              <a-col span="12">
                <a-form-item label={$t("table13")} name="channel_id">
                  <s-select
                    allowClear
                    vModel:newValue={drawerFormState.channel_id}
                    placeholder={$t("placeholder37")}
                    options={arrayToOptions(drawerChannelMap.value, {
                      label: "name",
                      value: "id",
                    })}
                    onChange={(value: any) => {
                      if (!isEmptyType(value)) {
                        const item = merchantUsersMap.value.find(
                          ({ channel_ids }: any) => channel_ids.includes(value)
                        );
                        drawerFormState.merchant_uid = item?.id ?? undefined;
                      } else {
                        drawerFormState.merchant_uid = undefined;
                        drawerChannelMap.value = deepClone(dicts.value.channel);
                      }
                    }}
                    onkeyup={({ target }) => only_limit_charts(target)}
                  ></s-select>
                </a-form-item>
              </a-col>
            </>
          ) : null}
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span={12}>
            <a-form-item label={$t("table4")} name="account_type">
              <a-tag style="margin:0" color="blue">
                {selectDictLabel(userTypeMap, drawerFormState?.account_type)}
              </a-tag>
            </a-form-item>
          </a-col>
          <a-col span={12}>
            <a-form-item label={$t("table87")} name="location">
              <a-row justify="start" align="middle" gutter={10}>
                <a-col span={17}>
                  {withDirectiveInput({
                    vNode: (
                      <a-input
                        readonly
                        class="user-select-none"
                        style="width: 100%"
                        vModel:value={drawerFormState.location}
                        placeholder={$t("placeholder38")}
                        onClick={() => {
                          clickPointType.value = 0;
                          getLocation();
                        }}
                      />
                    ),
                  })}
                </a-col>
                <a-col span={7}>
                  <a
                    onClick={() => {
                      clickPointType.value = 0;
                      getLocation();
                    }}
                  >
                    {$t("base.mapSelectPoint")}
                  </a>
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span={12}>
            <a-form-item
              name="height"
              vSlots={{
                label: () => (
                  <a-row class={styles.tips}>
                    <im-tooltip
                      className="mr5"
                      defaultValue={<i class="iconfont icon-tishi4"></i>}
                      title={
                        <i>
                          {$t("placeholder76") +
                            "150cm" +
                            $t("base.to") +
                            "220cm" +
                            $t("base.between")}
                        </i>
                      }
                    />
                    <i>{$t("table108")}</i>
                  </a-row>
                ),
              }}
              required={drawerFormState.sex != 1}
            >
              <a-row justify="start" align="middle" gutter={10}>
                <a-col span={17}>
                  {withDirectiveInput({
                    vNode: (
                      <a-input-number
                        maxlength={3}
                        style="width: 100%"
                        vModel:value={drawerFormState.height}
                        placeholder={$t("placeholder39")}
                      />
                    ),
                  })}
                </a-col>
                <a-col span={7}>
                  <i>{$t("base.unitCm")}</i>
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
          <a-col span={12}>
            <a-form-item
              name="weight"
              vSlots={{
                label: () => (
                  <a-row class={styles.tips}>
                    <im-tooltip
                      className="mr5"
                      defaultValue={<i class="iconfont icon-tishi4"></i>}
                      title={
                        <i>
                          {$t("placeholder77") +
                            "45kg" +
                            $t("base.to") +
                            "150kg" +
                            $t("base.between")}
                        </i>
                      }
                    />
                    <i>{$t("table110")}</i>
                  </a-row>
                ),
              }}
              required={drawerFormState.sex != 1}
            >
              <a-row justify="start" align="middle" gutter={10}>
                <a-col span={17}>
                  {withDirectiveInput({
                    vNode: (
                      <a-input-number
                        maxlength={3}
                        style="width: 100%"
                        vModel:value={drawerFormState.weight}
                        placeholder={$t("placeholder40")}
                      />
                    ),
                  })}
                </a-col>
                <a-col span={7}>
                  <i>{$t("base.unitKg")}</i>
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span="12">
            <a-form-item label={$t("table76")} name="skin_color">
              <s-select
                allowClear
                vModel:newValue={drawerFormState.skin_color}
                placeholder={$t("placeholder157")}
                options={skinColorMap}
              ></s-select>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label={$t("table77")} name="hair_color">
              <s-select
                allowClear
                vModel:newValue={drawerFormState.hair_color}
                placeholder={$t("placeholder158")}
                options={hairColorMap}
              ></s-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span="12">
            <a-form-item label={$t("table162")} name="eye_color">
              <s-select
                allowClear
                vModel:newValue={drawerFormState.eye_color}
                placeholder={$t("placeholder159")}
                options={eyeColorMap}
              ></s-select>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label={$t("table163")} name="punch">
              <s-select
                allowClear
                vModel:newValue={drawerFormState.punch}
                placeholder={$t("placeholder160")}
                options={punchMap}
              ></s-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span="12">
            <a-form-item label={$t("table173")} name="race">
              <s-select
                allowClear
                vModel:newValue={drawerFormState.race}
                placeholder={$t("placeholder161")}
                options={raceMap}
              ></s-select>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label={$t("table174")} name="educational">
              <s-select
                allowClear
                vModel:newValue={drawerFormState.educational}
                placeholder={$t("placeholder162")}
                options={educationalMap}
              ></s-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span="12">
            <a-form-item label={$t("table109")} name="constellation" required>
              {drawerFormState.constellation ? (
                <i>{drawerFormState.constellation}</i>
              ) : null}
            </a-form-item>
          </a-col>

          {drawerFormState.sex !== 1 ? (
            <>
              <a-col span="12">
                <a-form-item label={$t("table90")} name="cup">
                  <s-select
                    allowClear
                    vModel:newValue={drawerFormState.cup}
                    placeholder={$t("placeholder43")}
                    options={
                      dicts.value?.cupType?.map?.((item: any) => ({
                        label: item,
                        value: item,
                      })) ?? []
                    }
                  ></s-select>
                </a-form-item>
              </a-col>
            </>
          ) : null}
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span="12">
            <a-form-item label={$t("table183")} name="tattoo">
              <s-select
                allowClear
                vModel:newValue={drawerFormState.tattoo}
                placeholder={$t("placeholder163")}
                options={tattooMap}
              ></s-select>
            </a-form-item>
          </a-col>
        </a-row>

        {/*  */}
        <a-row class="s-drawer-extra-row">
          <s-title>{$t("user9")}</s-title>
        </a-row>
        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span="12">
            <a-form-item label={$t("table184")} name="smoke">
              <s-select
                allowClear
                vModel:newValue={drawerFormState.smoke}
                placeholder={$t("placeholder164")}
                options={smokeMap}
              ></s-select>
            </a-form-item>
          </a-col>

          <a-col span="12">
            <a-form-item label={$t("table213")} name="drink">
              <s-select
                allowClear
                vModel:newValue={drawerFormState.drink}
                placeholder={$t("placeholder165")}
                options={drinkMap}
              ></s-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row">
          <s-title>{$t("user10")}</s-title>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span="12">
            <a-form-item
              label={$t("table89")}
              name="intention"
              rules={[
                {
                  required: true,
                  message: $t("placeholder42"),
                  trigger: ["change", "blur"],
                },
              ]}
            >
              <s-select
                vModel:value={drawerFormState.intention}
                placeholder={$t("placeholder42")}
                options={intentionMap.value}
                mode="multiple"
              ></s-select>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item
              label={$t("table31")}
              name="is_lock"
              rules={[
                {
                  required: true,
                  message: $t("placeholder61"),
                  trigger: ["change", "blur"],
                },
              ]}
            >
              <s-radio-group
                vModel={drawerFormState.is_lock}
                options={userStateMap}
              ></s-radio-group>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span={12}>
            <a-form-item label={$t("table88")} name="bio">
              {withDirectiveInput({
                vNode: (
                  <a-textarea
                    vModel:value={drawerFormState.bio}
                    placeholder={$t("placeholder41")}
                    rows={3}
                    maxlength={50}
                    showCount={true}
                  />
                ),
              })}
            </a-form-item>
          </a-col>
          <a-col span={12}>
            <a-form-item label={$t("user11")} name="can_provide">
              {withDirectiveInput({
                vNode: (
                  <a-textarea
                    vModel:value={drawerFormState.can_provide}
                    placeholder={$t("placeholder166")}
                    rows={3}
                    maxlength={50}
                    showCount={true}
                  />
                ),
              })}
            </a-form-item>
          </a-col>
        </a-row>

        {drawerFormState.sex === 1 ? (
          <a-row class="s-drawer-extra-row" gutter={16}>
            <a-col span="12">
              <a-form-item
                label={$t("table91")}
                name="month_income"
                rules={[
                  {
                    required: true,
                    message: $t("placeholder44"),
                    trigger: ["change", "blur"],
                  },
                ]}
              >
                <a-row justify="center" align="middle" gutter={8}>
                  <a-col span="20">
                    <s-select
                      vModel:newValue={drawerFormState.month_income}
                      placeholder={$t("placeholder44")}
                      options={monthIncomeMap}
                      showSearch={true}
                      filterOption={filterOption}
                      onkeyup={({ target }) => only_limit_charts(target)}
                    />
                  </a-col>
                  <a-col span="4" class="fs11">
                    {$t("base.unit")}：{currencyUnit.value}
                  </a-col>
                </a-row>
              </a-form-item>
            </a-col>
            <a-col span={12}>
              <a-form-item label={$t("table92")} name="occupation_id" required>
                <a-cascader
                  v-model:value={drawerFormState.occupation_id}
                  displayRender={({ labels, selectedOptions }) => {
                    return labels?.join?.("/") ?? "";
                  }}
                  options={occupationCatesData.value}
                  load-data={onLoadOccupationCatesData}
                  placeholder={$t("placeholder45")}
                />
              </a-form-item>
            </a-col>
          </a-row>
        ) : null}

        <a-row class="s-drawer-extra-row">
          <s-title>{$t("base.customEquity")}</s-title>
        </a-row>
        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span="12">
            <a-form-item label={$t("table5")} name="vip_level">
              <s-select
                vModel:newValue={drawerFormState.vip_level}
                placeholder={$t("placeholder46")}
                options={vipOptions.value}
              ></s-select>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label={$t("table6")} name="popular_level">
              <s-select
                vModel:newValue={drawerFormState.popular_level}
                placeholder={$t("placeholder47")}
                options={popularOptions.value}
              ></s-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span="12">
            <a-form-item label={$t("table7")} name="score_level">
              <s-select
                vModel:newValue={drawerFormState.score_level}
                placeholder={$t("placeholder48")}
                options={scoreOptions.value}
              ></s-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="s-drawer-extra-row" gutter={16}>
          <a-col span={20}>
            <s-title>{$t("base.labelInfo")}</s-title>
          </a-col>
          <a-col span={4} style="text-align: right">
            <s-button
              size="small"
              style="width: 100px"
              onClick={() => handleStrikeLabel()}
            >
              {$t("base.markLabel")}
            </s-button>
          </a-col>
        </a-row>

        <a-row class="mb8 s-drawer-extra-row" gutter={16}>
          <a-col class="ml8">
            <i class={[styles.title, styles.required]}>{$t("table93")}：</i>
          </a-col>
          {drawerFormState?.tag_ids?.length
            ? (() => {
                const userTags = getItemsById(
                  [
                    ...(dicts?.value?.userTags ?? []),
                    ...(dataRes?.value?.accountTag ?? []),
                  ],
                  drawerFormState.tag_ids,
                  {
                    keys: ["tag_name", "tag_id"],
                    values: ["tag_name", "tag_id"],
                  }
                )?.filter(Boolean);
                return (
                  userTags?.map((item) => (
                    <a-col key={item.diff_key} class="mb5">
                      <a-tag>{item?.tag_name}</a-tag>
                    </a-col>
                  )) ?? null
                );
              })()
            : null}
        </a-row>

        <a-row class="mb8 s-drawer-extra-row" gutter={16}>
          <a-col class="ml8">
            <i class={styles.title}>{$t("table94")}：</i>
          </a-col>
          {drawerFormState?.accountSystemTag?.length
            ? (() => {
                const systemTags = getItemsById(
                  dicts.value.systemTags,
                  drawerFormState.accountSystemTag,
                  {
                    keys: ["tag_name", "tag_id"],
                    values: ["tag_name", "tag_id"],
                  }
                )?.filter(Boolean);
                return (
                  systemTags?.map((item) => (
                    <a-col key={item.diff_key} class="mb5">
                      <a-tag>{item?.tag_name}</a-tag>
                    </a-col>
                  )) ?? null
                );
              })()
            : null}
        </a-row>
      </>
    );
  },
});
